<template>
  <view class="flex-col justify-start section_3 pos">
    <view class="flex-col section_7">
      <text class="self-center font_2 text_4">{{$t('mine.changePassword')}}</text>
      <view class="flex-col self-stretch group_5">
        <text class="self-start font">{{$t('mine.newPassword')}}</text>
        <input-verify class="input-password" inputType="password" :placeHolder="$t('mine.newPasswordPlace')" :errMsg="$t('mine.passwordError')" v-model="newPassword" :isVerifyCode="false" />
        <text class="self-start font text_6">{{$t('mine.confirm')}}</text>
        <input-verify
          class="input-password"
          inputType="password"
          :placeHolder="$t('mine.newPasswordPlace')"
          :errMsg="$t('mine.passwordError')"
          v-model="newConfirmPassword"
          :isVerifyCode="false"
        />
      </view>
      <view class="flex-row self-stretch group_6">
        <view class="flex-col justify-start items-center text-wrapper_2" @click="handleClose"><text class="text_12">{{$t('mine.cancel')}}</text></view>
        <view class="flex-col justify-start items-center text-wrapper_3 ml-31" @click="handleOk">
          <text class="font_2 text_13">{{$t('mine.confirm')}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import InputVerify from '@/components/InputVerify/index.vue';
import { setSecondPwd } from '@/service/mine';
export default {
  components: {
    InputVerify
  },
  props: {
    email: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      newPassword: '',
      newConfirmPassword: ''
    };
  },

  methods: {
    handleClose() {
      this.$emit('close');
    },
    async handleOk() {
      uni.showToast({
        title: 'confirm ...',
        icon: 'none',
        duration: 1500
      });
      const { data, statusCode: code } = await setSecondPwd({
        pwd: this.newPassword,
        confirmPwd: this.newConfirmPassword
      });

      console.log(data, code, '===》修改二级密码');
      this.$emit('close');
    }
  }
};
</script>

<style scoped lang="scss">
.ml-31 {
  margin-left: 1.94rem;
}

.section_3 {
  padding: 12.75rem 0;
  background-color: #000000b3;

  .section_7 {
    margin: 0 1rem;
    padding: 1.63rem 1rem 1.25rem;
    border-radius: 1.5rem;
    background-image: url('@/static/common/dialog_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .font_2 {
      font-size: 1rem;
      font-family: PingFang SC;
      color: #ffffff;
    }

    .text_4 {
      line-height: 0.94rem;
    }

    .group_5 {
      margin-top: 1.88rem;

      .input-password {
        margin-top: 24upx;
      }

      .font {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.56rem;
        color: #ffffff;
      }

      .section_8 {
        margin-top: 0.5rem;
        padding: 0.88rem 0.75rem;
        background-color: #ffffff1a;
        border-radius: 0.5rem;

        .text_5 {
          line-height: 0.81rem;
        }

        .image-wrapper {
          margin-right: 0.25rem;
          width: 2.25rem;
          border-left: solid 0.031rem #ffffff1a;

          .image_6 {
            width: 1.25rem;
            height: 1.25rem;
          }
        }

        .text_7 {
          line-height: 0.39rem;
        }
      }

      .text_6 {
        margin-top: 1rem;
      }

      .text_8 {
        margin-top: 1rem;
      }

      .section_10 {
        margin-top: 0.5rem;
        padding: 0.88rem;
        background-color: #ffffff1a;
        border-radius: 0.5rem;

        .text_9 {
          color: #ffffff80;
          line-height: 0.65rem;
        }

        .text-wrapper {
          margin-right: 0.38rem;
          padding: 0.38rem 0;
          width: 5.4rem;
          border-left: solid 0.031rem #ffffff1a;

          .text_10 {
            font-size: 0.81rem;
            line-height: 0.6rem;
          }
        }
      }

      .font_3 {
        font-size: 0.88rem;
        font-family: PingFang SC;
        color: #ffffff;
      }
    }

    .group_6 {
      margin-top: 2.25rem;

      .text-wrapper_2 {
        padding: 1.13rem 0;
        flex: 1 1 8.75rem;
        background-color: #ffffff33;
        border-radius: 0.75rem;
        backdrop-filter: blur(1rem);
        height: 3rem;

        .text_12 {
          color: #ffffffb3;
          font-size: 1rem;
          font-family: PingFang SC;
          line-height: 0.74rem;
        }
      }

      .text-wrapper_3 {
        padding: 1.13rem 0;
        flex: 1 1 8.75rem;
        background-image: linear-gradient(113.8deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
        border-radius: 0.75rem;
        height: 3rem;

        .text_13 {
          line-height: 0.74rem;
        }
      }
    }
  }
}

.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>
